<template>
	<view class="confirm-order__-content">
		<!-- 收货地址 -->
		<navigator class="address" hover-class="false" url="/pages/mine/address">
			<view class="addressInfo" v-if="isGet">
				<view class="address-info"><text>{{address.consignee}}</text>{{address.phone}}</view>
				<view class="address-area">
					{{address.province_name}}{{address.city_name}}{{address.area_name}}{{address.address}}
				</view>
			</view>
			<view class="addressNone" v-else>请选择收货地址</view>
			<i class="iconfont iconright"></i>
		</navigator>
		<view class="commodity-content">
			<view class="commodity-content-item" v-for="(item,index) in goods" :key="index">
				<image :src="item.price.path" mode="aspectFill"></image>
				<view class="commodity">
					<view>
						<view class="title">{{item.goods_name}}</view>
						<view class="stitle">{{item.goods_subname}}</view>
					</view>
					<view class="price-sold">
						<view class="price"><span v-if="isPoint">{{item.price.score}}</span>积分 + ￥{{item.price.cost}}
						</view>
						<view class="sold">x{{item.number}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="express">配送方式：顺丰</view>
		<view class="remark-content other-item">
			<view class="title">备注</view>
			<input v-model="desc" maxlength="30" @input="inputDesc" placeholder="建议留言前先与卖家沟通确认"
				placeholder-style="color:#CDCDCD;" />
		</view>
		<view class="other-item" v-if="!isPoint">
			<view class="title">优惠券</view>
			<view class="right">暂无优惠券</view>
			<view class="iconfont iconright"></view>
		</view>
		<view class="other-item">
			<view class="title">商品金额</view>
			<view class="right price">￥{{priceDetail.cost*number}}</view>
		</view>
		<view class="other-item yunfei">
			<view class="title">运费</view>
			<view class="right price">￥00.00</view>
		</view>
		<view class="footer-content">
			<view class="commodity-count">共{{number}}件</view>
			<view class="price-title">合计：</view>
			<view class="price">￥{{priceDetail.cost*number}}</view>
			<view class="submit-btn" @tap="submit">提交订单</view>
		</view>
		<floating-ball></floating-ball>
	</view>
</template>

<script>
	import floatingBall from '../../components/floating-ball-menu/floating-ball-menu.vue'
	export default {
		components: {
			floatingBall
		},
		data() {
			return {
				goodId: 0, //商品ID
				goods_name: null, //商品标题
				goods_subname: null, //商品描述
				number: 0, //商品数量
				priceDetail: {}, //规格详情
				image: null,
				address: {}, //默认收货地址详情
				isGet: false, //是否存在默认地址
				isPoint: false, //是否是积分兑换
				desc: '', //备注
				goods: []
			}
		},
		onLoad(e) {
			let data = JSON.parse(e.data);
			if (data.type && data.type == 'point') {
				this.isPoint = true;
			}
			this.goods = data.goods;
			this.goods[1] = this.goods[0]
			// this.goodId = data.id;
			// this.goods_name = data.goods_name;
			// this.goods_subname = data.goods_subname;
			// this.number = data.number;
			// this.priceDetail = data.price;
			// this.image = data.price.path;
			this.getAddress();
		},
		methods: {
			//提交订单
			submit() {
				var data = {
					address: this.address.address,
					province_id: this.address.province_id,
					province_name: this.address.province_name,
					city_id: this.address.city_id,
					city_name: this.address.city_name,
					area_id: this.address.area_id,
					area_name: this.address.area_name,
					consignee: this.address.consignee,
					consignee_phone: this.address.phone,
					total_pay: Number(this.priceDetail.cost * this.munber),
					// goods: [{
					// 	goods_id 603072 daa960d,
					// 	goods_name 测试商品,
					// 	goods_spec 16,
					// 	16 GB,
					// 	spec_price_id 603072 daa961b,
					// 	603072 daa9620,
					// 	activities 1,
					// 	buy_num 1,
					// 	delivery_tpye 2
					// }]
				}
				if (this.isPoint) {
					data.score_money = this.priceDetail.score
				}
				if (this.desc) {
					data.desc = this.desc
				}
				this.$shopApi.apiPost('font/order/save', data).then(res => {
					if (res.data.code == 200 && res.data.data.list && res.data.data.list.length > 0) {
						this.address = res.data.data.list[0];
						this.isGet = true;
					}
				})
			},
			//获取默认地址
			getAddress() {
				this.$shopApi.apiPost('font/address/infos', {
					is_default: 1
				}).then(res => {
					if (res.data.code == 200 && res.data.data.list && res.data.data.list.length > 0) {
						this.address = res.data.data.list[0];
						this.isGet = true;
					}
				})
			},
			//备注设置
			inputDesc: function(e) {
				this.desc = this.desc.replace(/[, ]/g, '');
				if (this.desc.length >= 30) {
					this.util.showDialog('备注最多只能输入30个字');
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.confirm-order__-content {
		.address {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 6upx solid #E6B873;

			.addressInfo {
				width: 90%;
			}

			.addressNone {
				color: #999999;
			}

			.iconright {
				color: #666666;
			}
		}

		.commodity-content {
			padding: 30upx;
			background-color: #FFFFFF;
			border-bottom: 2upx solid #CDCDCD;

			.commodity-content-item {
				height: 180upx;
				display: flex;
				padding: 20upx 0;
				image {
					width: 180upx;
					height: 180upx;
					background-color: #FAFAFA;
				}

				.commodity {
					margin-left: 20upx;
					width: calc(100% - 200upx);
					display: flex;
					flex-direction: column;
					justify-content: space-between;

					.title {
						color: #333333;
						overflow: hidden; //将超出的部分隐藏
						text-overflow: ellipsis; //超出部分用省略号显示
						display: -webkit-box;
						-webkit-box-orient: vertical;
						-webkit-line-clamp: 2;
						font-family: Source Han Sans CN;
					}

					.stitle {
						color: #999999;
						font-size: 24upx;
						font-family: Source Han Sans CN;
						margin: 10upx 0;
						white-space: nowrap;
						overflow: hidden; //将超出的部分隐藏
						text-overflow: ellipsis; //超出部分用省略号显示
					}

					.price-sold {
						display: flex;
						justify-content: space-between;

						.price,
						.sold {
							font-size: 28upx;
							font-family: Source Han Sans CN;
							font-weight: 400;
							line-height: 40upx;
							color: #333333;
							opacity: 1;
						}

						.sold {
							color: #CDCDCD;
						}
					}
				}
			}
		}

		.express {
			width: 100%;
			height: 100upx;
			line-height: 100upx;
			padding: 0 30upx;
			font-size: 28upx;
			font-family: Source Han Sans CN;
			font-weight: 400;
			color: #333333;
			opacity: 1;
			background-color: #FFFFFF;
		}

		.other-item {
			width: 100%;
			height: 100upx;
			padding: 0 30upx;
			display: flex;
			box-sizing: border-box;
			background-color: #FFFFFF;
			border-bottom: 2upx solid #CDCDCD;

			.title {
				width: 180upx;
				line-height: 100upx;
			}

			.right {
				margin-left: auto;
				line-height: 100upx;
				font-size: 24upx;
				font-family: Source Han Sans CN;
				font-weight: 400;
				color: #CDCDCD;
				opacity: 1;
			}

			.price {
				color: #E43841;
			}

			.iconright {
				line-height: 100upx;
				color: #CDCDCD;
				font-weight: 400;
				font-size: 26upx;
				margin-left: 20upx;
			}
		}

		.yunfei {
			border-bottom: none;
		}

		.remark-content {
			margin-top: 20upx;

			input {
				margin-left: auto;
				height: 100upx;
				font-size: 28upx;
				width: 366upx;
			}
		}

		.footer-content {
			position: absolute;
			width: 100%;
			height: 100upx;
			bottom: 0;
			background-color: #FFFFFF;
			display: flex;
			padding: 0 30upx;
			box-sizing: border-box;

			view {
				line-height: 100upx;
			}

			.commodity-count {
				font-size: 24upx;
				color: #999999;
			}

			.price-title {
				margin-left: 20upx;
				font-size: 28upx;
				color: #333333;
			}

			.price {
				font-size: 32upx;
				color: #E43841;
			}

			.submit-btn {
				margin-left: auto;
				width: 200upx;
				height: 70upx;
				line-height: 70upx;
				text-align: center;
				background: #EAB867;
				box-shadow: 0 2upx 8upx #E6B873;
				border-radius: 40upx;
				color: #FFFFFF;
				font-size: 28upx;
				margin-top: 15upx;
			}
		}
	}
</style>
